<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Phoenix Editor - 轻量级代码编辑器</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .editor-mockup {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
                border-radius: 8px;
                overflow: hidden;
            }
            }
            .editor-header {
                background-color: #2D3748;
                padding: 0.5rem 1rem;
                display: flex;
                align-items: center;
                gap: 0.5rem;
            }
            .editor-tab {
                background-color: #4A5568;
                padding: 0.25rem 1rem;
                border-radius: 4px 4px 0 0;
                font-size: 0.875rem;
                color: #E2E8F0;
            }
            .editor-content {
                background-color: #1A202C;
                padding: 1rem;
                color: #E2E8F0;
                font-family: monospace;
                font-size: 0.875rem;
                line-height: 1.5;
            }
            /* FAQ 动画相关样式 */
            .faq-item {
                transition: all 0.3s ease;
            }
            .faq-answer {
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.5s ease-out, padding 0.3s ease-out;
                opacity: 0;
            }
            .faq-answer.active {
                max-height: 1000px;
                transition: max-height 0.8s ease-in, padding 0.5s ease-in;
                opacity: 1;
            }
            .faq-icon {
                transition: transform 0.3s ease;
            }
            .faq-icon.rotate {
                transform: rotate(180deg);
            }
            /* 各部分间距样式 */
            .section-padding {
                padding: 200px 0;
            }
    </style>
</head>
<body class="bg-gray-50 text-gray-800">
    <!-- 导航栏 -->
    <header id="navbar" class="fixed w-full top-0 z-50 bg-white/90 backdrop-blur-sm shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="#" class="flex items-center gap-2">
                        <div class="w-8 h-8 bg-primary rounded-md flex items-center justify-center">
                            <i class="fa fa-code text-white"></i>
                        </div>
                        <span class="text-xl font-bold text-primary">Phoenix Editor</span>
                    </a>
                </div>
                
                <!-- 桌面导航 -->
                <nav class="hidden md:flex space-x-8">
                    <a href="#features" class="text-gray-600 hover:text-primary transition-colors">特性</a>
                    <a href="#installation" class="text-gray-600 hover:text-primary transition-colors">安装</a>
                    <a href="#usage" class="text-gray-600 hover:text-primary transition-colors">使用方法</a>
                    <a href="#modules" class="text-gray-600 hover:text-primary transition-colors">模块</a>
                    <a href="#faq" class="text-gray-600 hover:text-primary transition-colors">问答</a>
                </nav>
                
                <div class="hidden md:flex items-center gap-4">
                    <a href="#download" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md transition-colors">
                        下载
                    </a>
                    <a href="https://gitee.com/creative-and-dream/phoenix-editor" target="_blank" class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-md transition-colors flex items-center gap-2">
                        <i class="fa fa-github"></i>
                        <span>Gitee</span>
                    </a>
                </div>
                
                <!-- 移动端菜单按钮 -->
                <button id="menu-toggle" class="md:hidden text-gray-600 hover:text-primary">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
            <div class="container mx-auto px-4 py-3 space-y-3">
                <a href="#features" class="block text-gray-600 hover:text-primary transition-colors py-2">特性</a>
                <a href="#installation" class="block text-gray-600 hover:text-primary transition-colors py-2">安装</a>
                <a href="#usage" class="block text-gray-600 hover:text-primary transition-colors py-2">使用方法</a>
                <a href="#modules" class="block text-gray-600 hover:text-primary transition-colors py-2">模块</a>
                <a href="#faq" class="block text-gray-600 hover:text-primary transition-colors py-2">问答</a>
                <div class="flex flex-col gap-2 pt-2">
                    <a href="#download" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md transition-colors text-center">
                        下载
                    </a>
                    <a href="https://gitee.com/creative-and-dream/phoenix-editor" target="_blank" class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-md transition-colors flex items-center justify-center gap-2">
                        <i class="fa fa-github"></i>
                        <span>Gitee</span>
                    </a>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="pt-16">
        <!-- 英雄区域 -->
        <section class="bg-gradient-to-br from-gray-900 to-gray-800 text-white py-20 md:py-32">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex flex-col md:flex-row items-center gap-12">
                    <div class="md:w-1/2 space-y-6">
                        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight text-shadow">
                            Phoenix Editor
                        </h1>
                        <p class="text-xl text-gray-300 leading-relaxed">
                            轻量级的代码编辑器，旨在提供简洁高效的编程体验。支持多种编程语言的语法高亮，并具备基本的代码编辑功能。
                        </p>
                        <div class="flex flex-col sm:flex-row gap-4 pt-4">
                            <a href="#download" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-md text-lg font-medium transition-colors flex items-center justify-center gap-2">
                                <i class="fa fa-download"></i>
                                <span>立即下载</span>
                            </a>
                            <a href="#installation" class="bg-gray-700 hover:bg-gray-600 text-white px-6 py-3 rounded-md text-lg font-medium transition-colors flex items-center justify-center gap-2">
                                <i class="fa fa-code"></i>
                                <span>开始使用</span>
                            </a>
                        </div>
                        <div class="flex items-center gap-4 pt-4 text-gray-400">
                            <span class="flex items-center gap-1"><i class="fa fa-check-circle text-secondary"></i> 开源免费</span>
                            <span class="flex items-center gap-1"><i class="fa fa-check-circle text-secondary"></i> 轻量级</span>
                            <span class="flex items-center gap-1"><i class="fa fa-check-circle text-secondary"></i> 跨平台</span>
                        </div>
                    </div>
                    <div class="md:w-1/2">
                        <div class="editor-mockup transform hover:scale-[1.02] transition-transform duration-300">
                            <div class="editor-header">
                                <div class="flex gap-2">
                                    <div class="w-3 h-3 rounded-full bg-red-500"></div>
                                    <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                                    <div class="w-3 h-3 rounded-full bg-green-500"></div>
                                </div>
                                <div class="editor-tab">main.py</div>
                                <div class="editor-tab bg-gray-600">app.js</div>
                            </div>
                            <div class="editor-content">
                                <pre><span class="text-green-400"># 示例 Python 代码</span>
<span class="text-blue-400">import</span> <span class="text-yellow-300">sys</span>
<span class="text-blue-400">from</span> <span class="text-yellow-300">datetime</span> <span class="text-blue-400">import</span> datetime

<span class="text-purple-300">def</span> <span class="text-cyan-300">greet</span>(name):
    <span class="text-blue-400">return</span> <span class="text-green-300">f"Hello, {name}! Current time: {datetime.now()}"</span>

<span class="text-purple-300">if</span> __name__ == <span class="text-green-300">"__main__"</span>:
    <span class="text-blue-400">if</span> len(sys.argv) > <span class="text-yellow-300">1</span>:
        <span class="text-purple-300">print</span>(greet(sys.argv[<span class="text-yellow-300">1</span>]))
    <span class="text-blue-400">else</span>:
        <span class="text-purple-300">print</span>(greet(<span class="text-green-300">"World"</span>))</pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 特性部分 -->
        <section id="features" class="py-20 bg-white">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-3xl md:text-4xl font-bold mb-4">核心特性</h2>
                    <p class="text-gray-600 max-w-3xl mx-auto text-lg">Phoenix Editor 提供的强大功能，让编程更高效</p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition-shadow">
                        <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-feather text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3">轻量级设计</h3>
                        <p class="text-gray-600">仅占用约10MB磁盘空间，50MB内存即可流畅运行，不会给系统带来负担。</p>
                    </div>
                    
                    <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition-shadow">
                        <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-code-fork text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3">多语言支持</h3>
                        <p class="text-gray-600">支持Python、JavaScript、HTML、CSS等多种编程语言的语法高亮和基本编辑功能。</p>
                    </div>
                    
                    <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition-shadow">
                        <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-globe text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3">跨平台兼容</h3>
                        <p class="text-gray-600">完美支持Windows、macOS和Linux系统，在不同平台上提供一致的用户体验。</p>
                    </div>
                    
                    <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition-shadow">
                        <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-lightbulb-o text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3">AI辅助功能</h3>
                        <p class="text-gray-600">集成Deepseek-r1大模型，提供代码建议、错误修复和解释，帮助用户更快编写代码。</p>
                    </div>
                    
                    <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition-shadow">
                        <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-paint-brush text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3">高级语法高亮</h3>
                        <p class="text-gray-600">使用ast语法树实现精准高亮，区分变量、函数名、包名等不同代码元素。</p>
                    </div>
                    
                    <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition-shadow">
                        <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-github text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3">开源免费</h3>
                        <p class="text-gray-600">基于MIT许可证开源，所有代码公开透明，允许自由修改和二次分发。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 安装部分 -->
        <section id="installation" class="py-20 bg-gray-50">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-3xl md:text-4xl font-bold mb-4">安装指南</h2>
                    <p class="text-gray-600 max-w-3xl mx-auto text-lg">简单几步，快速安装Phoenix Editor</p>
                </div>
                
                <div class="max-w-3xl mx-auto">
                    <div class="bg-white rounded-xl shadow-sm p-8 mb-8">
                        <h3 class="text-2xl font-semibold mb-6 flex items-center">
                            <i class="fa fa-windows text-primary mr-3"></i>
                            Windows 安装
                        </h3>
                        <ol class="space-y-4">
                            <li class="flex">
                                <span class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">1</span>
                                <p>从下载页面获取 <code class="bg-gray-100 px-1 py-0.5 rounded">PhoenixEditor-Setup.exe</code> 安装文件</p>
                            </li>
                            <li class="flex">
                                <span class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">2</span>
                                <p>双击运行安装文件，跟随安装向导步骤进行安装</p>
                            </li>
                            <li class="flex">
                                <span class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">3</span>
                                <p>安装完成后，可在开始菜单或桌面上找到Phoenix Editor的快捷方式</p>
                            </li>
                        </ol>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-sm p-8 mb-8">
                        <h3 class="text-2xl font-semibold mb-6 flex items-center">
                            <i class="fa fa-apple text-primary mr-3"></i>
                            macOS 安装
                        </h3>
                        <ol class="space-y-4">
                            <li class="flex">
                                <span class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">1</span>
                                <p>从下载页面获取 <code class="bg-gray-100 px-1 py-0.5 rounded">PhoenixEditor.dmg</code> 镜像文件</p>
                            </li>
                            <li class="flex">
                                <span class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">2</span>
                                <p>双击DMG文件，将Phoenix Editor拖拽到应用程序文件夹中</p>
                            </li>
                            <li class="flex">
                                <span class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">3</span>
                                <p>从应用程序文件夹启动Phoenix Editor，首次运行可能需要在系统偏好设置中允许运行</p>
                            </li>
                        </ol>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-sm p-8">
                        <h3 class="text-2xl font-semibold mb-6 flex items-center">
                            <i class="fa fa-linux text-primary mr-3"></i>
                            Linux 安装
                        </h3>
                        <ol class="space-y-4">
                            <li class="flex">
                                <span class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">1</span>
                                <p>对于Ubuntu/Debian系统，获取 <code class="bg-gray-100 px-1 py-0.5 rounded">phoenix-editor.deb</code> 安装包</p>
                            </li>
                            <li class="flex">
                                <span class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">2</span>
                                <p>打开终端，运行命令: <code class="bg-gray-100 px-1 py-0.5 rounded">sudo dpkg -i phoenix-editor.deb</code></p>
                            </li>
                            <li class="flex">
                                <span class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">3</span>
                                <p>安装完成后，可以从应用程序菜单启动，或在终端中运行 <code class="bg-gray-100 px-1 py-0.5 rounded">phoenix-editor</code> 命令</p>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </section>

        <!-- 使用方法部分 -->
        <section id="usage" class="py-20 bg-white">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-3xl md:text-4xl font-bold mb-4">使用方法</h2>
                    <p class="text-gray-600 max-w-3xl mx-auto text-lg">快速上手Phoenix Editor的基本操作</p>
                </div>
                
                <div class="max-w-4xl mx-auto">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
                        <div class="bg-gray-50 p-6 rounded-xl">
                            <h3 class="text-xl font-semibold mb-4 flex items-center">
                                <i class="fa fa-file-text-o text-primary mr-2"></i>
                                创建和打开文件
                            </h3>
                            <ul class="space-y-2 text-gray-600">
                                <li class="flex items-start">
                                    <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                    <span>点击菜单栏的"文件" -> "新建"创建新文件</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                    <span>使用快捷键<code class="bg-gray-200 px-1 rounded">Ctrl+N</code> (Windows/Linux) 或 <code class="bg-gray-200 px-1 rounded">Cmd+N</code> (macOS)创建新文件</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                    <span>点击"文件" -> "打开"选择要编辑的文件</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                    <span>使用快捷键<code class="bg-gray-200 px-1 rounded">Ctrl+O</code> 或 <code class="bg-gray-200 px-1 rounded">Cmd+O</code>打开文件</span>
                                </li>
                            </ul>
                        </div>
                        
                        <div class="bg-gray-50 p-6 rounded-xl">
                            <h3 class="text-xl font-semibold mb-4 flex items-center">
                                <i class="fa fa-save text-primary mr-2"></i>
                                保存文件
                            </h3>
                            <ul class="space-y-2 text-gray-600">
                                <li class="flex items-start">
                                    <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                    <span>点击菜单栏的"文件" -> "保存"保存当前文件</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                    <span>使用快捷键<code class="bg-gray-200 px-1 rounded">Ctrl+S</code> 或 <code class="bg-gray-200 px-1 rounded">Cmd+S</code>保存文件</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                    <span>使用"文件" -> "另存为"或快捷键<code class="bg-gray-200 px-1 rounded">Ctrl+Shift+S</code> 另存文件</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                    <span>Phoenix Editor会自动保存您的编辑内容，防止意外丢失</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div class="bg-gray-50 p-6 rounded-xl">
                            <h3 class="text-xl font-semibold mb-4 flex items-center">
                                <i class="fa fa-play text-primary mr-2"></i>
                                运行代码
                            </h3>
                            <ul class="space-y-2 text-gray-600">
                                <li class="flex items-start">
                                    <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                    <span>点击菜单栏的"运行" -> "运行当前文件"</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                    <span>使用快捷键<code class="bg-gray-200 px-1 rounded">Ctrl+R</code> 或 <code class="bg-gray-200 px-1 rounded">Cmd+R</code>运行代码</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                    <span>运行结果会显示在底部的输出面板中</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                    <span>可以使用<code class="bg-gray-200 px-1 rounded">Ctrl+C</code> 终止正在运行的程序</span>
                                </li>
                            </ul>
                        </div>
                        
                        <div class="bg-gray-50 p-6 rounded-xl">
                            <h3 class="text-xl font-semibold mb-4 flex items-center">
                                <i class="fa fa-lightbulb-o text-primary mr-2"></i>
                                使用AI辅助
                            </h3>
                            <ul class="space-y-2 text-gray-600">
                                <li class="flex items-start">
                                    <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                    <span>点击右侧面板的"AI助手"打开AI功能</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                    <span>选中代码后右键选择"解释代码"获取代码解释</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                    <span>在AI输入框中提问，获取编程相关帮助</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check text-secondary mt-1 mr-2"></i>
                                    <span>使用"优化代码"功能获取代码改进建议</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 模块部分 -->
        <section id="modules" class="py-20 bg-gray-50">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-3xl md:text-4xl font-bold mb-4">扩展模块</h2>
                    <p class="text-gray-600 max-w-3xl mx-auto text-lg">Phoenix Editor支持的扩展模块，增强编辑器功能</p>
                </div>
                
                <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow">
                        <div class="h-40 bg-gradient-to-r from-blue-500 to-primary flex items-center justify-center">
                            <i class="fa fa-html5 text-white text-6xl"></i>
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-semibold mb-2">Web开发模块</h3>
                            <p class="text-gray-600 mb-4">增强HTML、CSS和JavaScript的支持，包括自动补全、格式化和预览功能。</p>
                            <a href="#" class="text-primary hover:text-primary/80 font-medium flex items-center">
                                <span>（暂无）</span>
                                <i class="fa fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow">
                        <div class="h-40 bg-gradient-to-r from-green-500 to-teal-500 flex items-center justify-center">
                            <i class="fa fa-database text-white text-6xl"></i>
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-semibold mb-2">数据库模块</h3>
                            <p class="text-gray-600 mb-4">添加数据库连接和查询功能，支持MySQL、PostgreSQL和SQLite等主流数据库。</p>
                            <a href="#" class="text-primary hover:text-primary/80 font-medium flex items-center">
                                <span>（暂无）</span>
                                <i class="fa fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow">
                        <div class="h-40 bg-gradient-to-r from-purple-500 to-indigo-500 flex items-center justify-center">
                            <i class="fa fa-cogs text-white text-6xl"></i>
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-semibold mb-2">发布工具模块</h3>
                            <p class="text-gray-600 mb-4">提供自动打包 zip ，整理项目文件结构树等功能。</p>
                            <a href="./html/releaseTool.html" class="text-primary hover:text-primary/80 font-medium flex items-center">
                                <span>了解更多</span>
                                <i class="fa fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow">
                        <div class="h-40 bg-gradient-to-r from-yellow-500 to-orange-500 flex items-center justify-center">
                            <i class="fa fa-cloud text-white text-6xl"></i>
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-semibold mb-2">云同步模块</h3>
                            <p class="text-gray-600 mb-4">添加云端存储和同步功能，让您可以在不同设备间同步代码和设置。</p>
                            <a href="#" class="text-primary hover:text="#" class="text-primary hover:text-primary/80 font-medium flex items-center">
                                <span>（暂无）</span>
                                <i class="fa fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- FAQ 部分 - 带有动画效果 -->
        <section id="faq" class="py-20 bg-gray-50">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-3xl md:text-4xl font-bold mb-4">常见问题</h2>
                    <p class="text-gray-600 max-w-3xl mx-auto text-lg">解答您可能遇到的问题</p>
                </div>
                
                <div class="max-w-3xl mx-auto space-y-6">
                    <!-- 问题 1 -->
                    <div class="faq-item bg-white rounded-xl shadow-sm overflow-hidden">
                        <button class="faq-question w-full flex justify-between items-center p-6 text-left font-semibold text-lg focus:outline-none">
                            <span>这个作品是采用什么进行编写的？</span>
                            <i class="fa fa-chevron-down text-gray-400 faq-icon"></i>
                        </button>
                        <div class="faq-answer px-6">
                            <p class="text-gray-600 pb-6">采用 Python 进行编写，接入了 <strong>Deepseek-r1</strong> 大模型，可以快速回应所有的诉求。</p>
                            <p class="text-gray-600 pb-6">同时使用了 ast 语法树进行高亮，实现对编程语言的代码高亮，能够支持所有语言的不同数据类型</p>
                        </div>
                    </div>
                    
                    <!-- 问题 2 -->
                    <div class="faq-item bg-white rounded-xl shadow-sm overflow-hidden">
                        <button class="faq-question w-full flex justify-between items-center p-6 text-left font-semibold text-lg focus:outline-none">
                            <span>这个作品有哪一些特点？</span>
                            <i class="fa fa-chevron-down text-gray-400 faq-icon"></i>
                        </button>
                        <div class="faq-answer px-6">
                            <h4 class="font-semibold text-primary mt-2">✨优势</h4>
                            <ul class="list-disc pl-5 space-y-2 text-gray-600 mt-2">
                                <li><strong>轻量化</strong> ——只占用大约 10MB 的磁盘空间，只需要 50 MB 的内存就能够运行</li>
                                <li><strong>跨平台</strong> ——支持 Windows, Linux/Unix 等操作系统，能够适应各种运行环境</li>
                                <li><strong>开源免费</strong>——项目的所有源代码都已经放在了 <a href="https://gitee.com/creative-and-dream/phoenix-editor/" target="_blank" class="text-primary hover:underline">Gitee</a> 上，采用 MIT 许可证开源，意味着任何人都能够把该作品进行修改并进行二次分发，给了使用者极高的自定义空间。</li>
                            </ul>
                            
                            <h4 class="font-semibold text-primary mt-4">⭕缺陷</h4>
                            <ul class="list-disc pl-5 space-y-2 text-gray-600 mt-2 pb-6">
                                <li>不能够云端保存</li>
                                <li>没有手机端内容</li>
                            </ul>
                        </div>
                    </div>
                    
                    <!-- 问题 3 -->
                    <div class="faq-item bg-white rounded-xl shadow-sm overflow-hidden">
                        <button class="faq-question w-full flex justify-between items-center p-6 text-left font-semibold text-lg focus:outline-none">
                            <span>这个作品主要面向哪一方面？</span>
                            <i class="fa fa-chevron-down text-gray-400 faq-icon"></i>
                        </button>
                        <div class="faq-answer px-6">
                            <p class="text-gray-600 pb-6">教育行业。相较于大多数的教育行业的 IDE，本 IDE 有更多的优势，请见上一问题的回答。</p>
                        </div>
                    </div>
                    
                    <!-- 问题 4 -->
                    <div class="faq-item bg-white rounded-xl shadow-sm overflow-hidden">
                        <button class="faq-question w-full flex justify-between items-center p-6 text-left font-semibold text-lg focus:outline-none">
                            <span>该作品相较于市面上的教育行业的IDE有哪一些优势和不足？</span>
                            <i class="fa fa-chevron-down text-gray-400 faq-icon"></i>
                        </button>
                        <div class="faq-answer px-6">
                            <p class="text-gray-600 mb-3">这里以 海龟编辑器 举例：</p>
                            <div class="overflow-x-auto">
                                <table class="min-w-full bg-white border border-gray-200">
                                    <thead>
                                        <tr class="bg-gray-100">
                                            <th class="py-3 px-4 border-b text-left">功能</th>
                                            <th class="py-3 px-4 border-b text-left">海龟编辑器</th>
                                            <th class="py-3 px-4 border-b text-left">本IDE</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="py-3 px-4 border-b">自动保存</td>
                                            <td class="py-3 px-4 border-b">√</td>
                                            <td class="py-3 px-4 border-b">√</td>
                                        </tr>
                                        <tr class="bg-gray-50">
                                            <td class="py-3 px-4 border-b">基础代码高亮<sub>关键字、数字的高亮</sub></td>
                                            <td class="py-3 px-4 border-b">√</td>
                                            <td class="py-3 px-4 border-b">√</td>
                                        </tr>
                                        <tr>
                                            <td class="py-3 px-4 border-b">高级代码高亮<sub>变量、函数名、包名</sub></td>
                                            <td class="py-3 px-4 border-b">X</td>
                                            <td class="py-3 px-4 border-b">√</td>
                                        </tr>
                                        <tr class="bg-gray-50">
                                            <td class="py-3 px-4 border-b">AI 功能</td>
                                            <td class="py-3 px-4 border-b">X</td>
                                            <td class="py-3 px-4 border-b">√</td>
                                        </tr>
                                        <tr>
                                            <td class="py-3 px-4 border-b">多语言代码高亮</td>
                                            <td class="py-3 px-4 border-b">X</td>
                                            <td class="py-3 px-4 border-b">√</td>
                                        </tr>
                                        <tr class="bg-gray-50">
                                            <td class="py-3 px-4 border-b">运行命令</td>
                                            <td class="py-3 px-4 border-b">O</td>
                                            <td class="py-3 px-4 border-b">√</td>
                                        </tr>
                                        <tr>
                                            <td class="py-3 px-4 border-b">云端保存</td>
                                            <td class="py-3 px-4 border-b">√</td>
                                            <td class="py-3 px-4 border-b">X</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <p class="text-gray-600 pb-6"></p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 下载区域 -->
        <section id="download" class="py-20 bg-gradient-to-br from-primary/90 to-primary text-white">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-3xl md:text-4xl font-bold mb-4">下载 Phoenix Editor</h2>
                    <p class="max-w-3xl mx-auto text-lg text-white/90">获取源代码，自行构建并开始您的高效编程之旅</p>
                </div>
                
                <div class="max-w-3xl mx-auto">
                    <!-- 源代码下载 -->
                    <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 text-center hover:bg-white/20 transition-colors">
                        <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fa fa-file-code-o text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">源代码 (.zip)</h3>
                        <p class="text-white/80 text-sm mb-4">适用于所有平台，需自行构建</p>
                        <a href="https://gitee.com/creative-and-dream/phoenix-editor/repository/archive/v1.0.0.zip" class="inline-block bg-white text-primary font-medium px-6 py-3 rounded-md hover:bg-white/90 transition-colors w-full">
                            下载源代码
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 论坛入口按钮 -->
        <section class="py-16 bg-gray-50">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
                <h2 class="text-2xl md:text-3xl font-bold mb-6">反馈 BUG</h2>
                <p class="text-gray-600 max-w-2xl mx-auto mb-8">
                    发现 BUG，并进行反馈，与其他人一起建设 Phoenix Editor
                </p>
                <a href="./html/bbs.html" class="inline-block bg-primary hover:bg-primary/90 text-white px-8 py-4 rounded-md text-lg font-medium transition-all transform hover:scale-105">
                    <i class="fa fa-comments mr-2"></i>访问 Issues 面板
                </a>
            </div>
        </section>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center mb-8">
                <div class="flex items-center gap-2 mb-6 md:mb-0">
                    <div class="w-8 h-8 bg-primary rounded-md flex items-center justify-center">
                        <i class="fa fa-code text-white"></i>
                    </div>
                    <span class="text-xl font-bold text-white">Phoenix Editor</span>
                </div>
                
                <div class="flex gap-6">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-github text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-twitter text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-envelope text-xl"></i>
                    </a>
                </div>
            </div>
            
            <div class="border-t border-gray-800 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-gray-400 text-sm mb-4 md:mb-0">
                        &copy; 2023 Phoenix Editor. 保留所有权利。
                    </p>
                    <div class="flex gap-6 text-sm text-gray-400">
                        <a href="#" class="hover:text-white transition-colors">隐私政策</a>
                        <a href="#" class="hover:text-white transition-colors">使用条款</a>
                        <a href="#" class="hover:text-white transition-colors">联系我们</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 移动端菜单切换
        const menuToggle = document.getElementById('menu-toggle');
        const mobileMenu = document.getElementById('mobile-menu');
        
        menuToggle.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
        
        // 导航栏滚动效果
        const navbar = document.getElementById('navbar');
        
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                navbar.classList.add('shadow-md');
                navbar.classList.remove('bg-white/90');
                navbar.classList.add('bg-white');
            } else {
                navbar.classList.remove('shadow-md');
                navbar.classList.add('bg-white/90');
                navbar.classList.remove('bg-white');
            }
        });
        
        // FAQ 动画效果实现
        const faqQuestions = document.querySelectorAll('.faq-question');
        
        faqQuestions.forEach(question => {
            // 默认展开第一个FAQ
            if (question === faqQuestions[0]) {
                const answer = question.nextElementSibling;
                const icon = question.querySelector('.faq-icon');
                answer.classList.add('active');
                icon.classList.add('rotate');
            }
            
            question.addEventListener('click', () => {
                const answer = question.nextElementSibling;
                const icon = question.querySelector('.faq-icon');
                
                // 关闭其他所有FAQ
                document.querySelectorAll('.faq-answer').forEach(item => {
                    if (item !== answer) {
                        item.classList.remove('active');
                        item.previousElementSibling.querySelector('.faq-icon').classList.remove('rotate');
                    }
                });
                
                // 切换当前FAQ状态
                answer.classList.toggle('active');
                icon.classList.toggle('rotate');
            });
        });
        
        // 平滑滚动 - 菜单栏跳转功能
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    // 计算目标位置，考虑固定导航栏的高度
                    const navbarHeight = document.getElementById('navbar').offsetHeight;
                    const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navbarHeight;
                    
                    // 平滑滚动到目标位置
                    window.scrollTo({
                        top: targetPosition,
                        behavior: 'smooth'
                    });
                    
                    // 关闭移动端菜单（如果打开）
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                    }
                }
            });
        });
    </script>
</body>
</html>
